<template>
  <div>
    <a-modal
      :title="title"
      :visible="open"
      :confirmLoading="uploading"
      @cancel="importExcelHandleCancel"
      @ok="importExcelHandleChange"
    >
      <a-spin tip="上传中..." :spinning="uploading">
        <a-upload-dragger
          name="file"
          accept=".xlsx, .xls"
          :file-list="fileList"
          :multiple="false"
          :remove="handleRemove"
          :before-upload="beforeUpload"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">请将文件拖拽到此处上传❥(^_-)</p>
          <p class="ant-upload-hint">支持单个上传，也可以点击后选择文件上传</p>
        </a-upload-dragger>
        <a-checkbox
          @change="handleCheckedUpdateSupport"
          :checked="updateSupport != 0"
        >是否更新已经存在的订单产品数据</a-checkbox>
        <a @click="importTemplate">下载模板</a>
      </a-spin>
    </a-modal>
    <a-modal
      :title="importTitle"
      :visible="visible"
      :footer="null"
      @cancel="cancel"
      :maskClosable="true"
    >
      <a-divider orientation="left">新增结果</a-divider>
      <p v-for="ordercode in importResult.insert" :key="ordercode">{{ ordercode }}</p>
      <a-divider orientation="left">修改结果</a-divider>
      <p v-for="ordercode in importResult.update" :key="ordercode">{{ ordercode }}</p>
      <a-divider orientation="left">失败结果</a-divider>
      <p v-for="ordercode in importResult.fail" :key="ordercode">{{ ordercode }}</p>
    </a-modal>
  </div>
</template>

<script>
import { importData } from '@/api/erp/orderProduct'

export default {
  name: 'ImportExcel',
  props: {
  },
  components: {
  },
  data () {
    return {
      title: '订单产品导入',
      open: false,
      uploadStatus: '',
      fileList: [],
      // 是否禁用上传
      uploading: false,
      updateSupport: 0,
      importTitle: '导入结果',
      visible: false,
      importResult: {},
      orderId: undefined
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
  },
  watch: {
  },
  methods: {
    /** 导入excel窗体关闭 */
    importExcelHandleCancel (e) {
      this.open = false
      this.fileList = []
      // 关闭后刷新列表
      this.$emit('ok')
    },
    /** 下载模板操作 */
    importTemplate () {
      this.download('erp/orderProduct/importTemplate', {
        ...this.queryParams
      }, `order_product_template_${new Date().getTime()}.xlsx`)
    },
    /** 导入excel窗体开启 */
    importExcelHandleOpen (order) {
      this.orderId = order.orderId
      this.open = true
    },
    beforeUpload (file) {
      this.fileList = [file]
      return false
    },
    /** 导入excel */
    importExcelHandleChange () {
      this.uploading = true
      const { fileList } = this
      if (fileList[0] === undefined) {
        this.$message.error(
          '请选择文件', 1
        )
      } else {
        const formData = new FormData()
        formData.append('file', fileList[0])
        formData.append('updateSupport', this.updateSupport)
        formData.append('orderId', this.orderId)
        importData(formData).then(response => {
          this.fileList = []
          this.importResult = response.data
          this.open = false
          this.visible = true
          this.$emit('ok')
        })
      }
      this.uploading = false
    },
    handleCheckedUpdateSupport () {
      this.updateSupport = this.updateSupport === 0 ? 1 : 0
    },
    handleRemove () {
      this.fileList = []
      this.uploading = false
    },
    cancel () {
      this.visible = false
    }
  }
}
</script>
